﻿
@section CSS{
    <style>
        #divModuleTree {
            margin-top: 5px;
            margin-left: 5px;
            margin-bottom: 100px;
        }

        .layui-tree-entry {
            margin-bottom: 5px !important;
        }
        .tree-node-select {
            background-color: #009688;
            color: #fff;
            border-radius: 5px;
            padding:2px 4px;
        }
    </style>
}

<div class="page-nav">首页 > 菜单模块</div>
<div class="page-body">
    <div class="layui-tab  layui-tab-brief">
        <ul class="layui-tab-title">
            <li class="layui-this">菜单模块</li>
            <li onclick="ModuleTree.init()">模块树视图</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <div class="page-quote">
                    <blockquote class="layui-elem-quote">管理模块信息列表<br />这里可以写些注意事项</blockquote>
                </div>

                <div class="page-query">
                    <form class="layui-form" id="formQuery">
                        <div class="layui-inline">
                            <label class="layui-form-label">模块ID</label>
                            <div class="layui-input-block">
                                <input type="text" name="Id" placeholder="" class="layui-input" autocomplete="off">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">模块名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="ModuleName" placeholder="" class="layui-input" autocomplete="off">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">模块编号</label>
                            <div class="layui-input-block">
                                <input type="text" name="ModuleCode" placeholder="" class="layui-input" autocomplete="off">
                            </div>
                        </div>
                        @*<div class="layui-inline">
            <label class="layui-form-label">父级模块</label>
            <div class="layui-input-block">
                <select lay-verify="required" lay-search="" name="ParentId">
                    <option value="">全部</option>
                    @if (ViewBag.DeptList != null)
                    {
                        foreach (var li in ViewBag.DeptList)
                        {
                            <option value="@li.Id">@li.Name</option>
                        }
                    }
                </select>
            </div>
        </div>*@
                        <div class="layui-inline">
                            <label class="layui-form-label"></label>
                            <div class="layui-input-block">
                                <button type="button" class="layui-btn" onclick="ModuleList.query()">查询</button>
                            </div>
                        </div>
                    </form>
                </div>

                <div class="page-tool">
                    <div class="layui-btn-group">
                        <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" onclick="ModuleList.add()">
                            <i class="layui-icon">&#xe608;</i> 添加
                        </button>
                    </div>
                </div>
                <div class="page-list">
                    <table id="table-list" lay-filter="tableList"></table>
                </div>
            </div>
            <div class="layui-tab-item">
                
                <div class="layui-row">
                    <div class="layui-col-md3" style="padding:5px;">
                        @*<div class="grid-demo grid-demo-bg1">50%</div>*@
                        <fieldset class="layui-elem-field" style="min-height:550px;">
                            <legend></legend>
                            <div class="layui-field-box">
                                <div id="divModuleTree"></div>
                            </div>
                        </fieldset>
                    </div>
                    <div class="layui-col-md9" style="padding:5px;">
                        @*<div class="grid-demo">50%</div>*@
                        <fieldset class="layui-elem-field">
                            <legend></legend>
                            <div class="layui-field-box" style="min-height:550px;">
                                你可以在这里放任何内容，比如表单神马的
                            </div>
                        </fieldset>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @*<div class="page-title"><i class="layui-icon layui-icon-rate-solid"></i><h2>模块管理</h2></div>
        <hr class="layui-bg-gray">*@


</div>

<script type="text/html" id="barTool">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

@section Scripts{
    <script>
        var ModuleList = function () {
            let inited = false;
            let data = {};
            var table;

            function initData() {
                layui.use(['form', 'layer', 'table', 'tree', 'element'], function () {

                    //加载数据
                    loadData();

                    //给工具条注册点击事件
                    layui.table.on('tool(tableList)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                        var id = obj.data.id;

                        if (obj.event === 'del') {
                            layer.confirm('确认删除该数据？', function (index) {
                                //开启loading
                                layer = layui.layer;
                                var indexLoad = layer.load(3, { shade: 0.3, zIndex: 19891017 });

                                $.ajax({
                                    url: "/Module/DeleteModule",
                                    type: "post",
                                    data: { id: id },
                                    success: function (data) {
                                        layer.close(index);
                                        if (data.state == 1) {
                                            parent.layer.msg("删除成功", { shade: 0.1, icon: 1 });
                                        } else if (data.state == 0) {
                                            parent.layer.open({
                                                title: '提示'
                                                , content: "删除失败 " + data.msg
                                                , shade: 0.4
                                                , icon: 5
                                            });
                                        } else {
                                            parent.layer.open({
                                                title: '提示'
                                                , content: "删除异常 " + data.msg
                                                , shade: 0.4
                                                , icon: 2
                                            });
                                        }
                                        layui.table.reload('table-list');
                                        layer.close(indexLoad);
                                    },
                                    error: function (xhr, state, errorThrown) {
                                        layer.close(index);
                                        layui.table.reload('table-list');
                                        parent.layer.open({
                                            title: '提示'
                                            , content: "删除异常 " + errorThrown
                                            , shade: 0.4
                                            , icon: 2
                                        });
                                        layer.close(indexLoad);
                                    }
                                });

                            });
                        } else if (obj.event === 'edit') {
                            layer.open({
                                type: 2,
                                title: '编辑模块',
                                area: ['450px', '580px'],
                                content: ["/Module/AddOrUpdateModule?id=" + id]
                            });
                        }
                    });

                });

            }

            function loadData() {
                var data = $('#formQuery').serializeJson();

                layui.table.render({
                    elem: '#table-list'
                    , height: 670
                    , url: '/Module/GetModuleList' //数据接口
                    , where: data
                    , page: true //开启分页
                    , limit: 15
                    , cols: [[ //表头
                        { field: 'id', title: 'ID', width: 100, sort: true }
                        , { field: 'moduleName', title: '模块名称', width: 160 }
                        , { field: 'moduleCode', title: '模块编码', width: 160 }
                        , { field: 'parentId', title: '父级ID', width: 80 }
                        , { field: 'parentName', title: '父级部门', width: 160 }
                        , {
                            field: 'isMenu', title: '是否菜单', width: 90, templet: function (d) {
                                return d.isMenu ? "是" : "否";
                            }
                        }
                        , {
                            field: 'createTime', title: '创建时间', templet: function (d) {
                                return layui.util.toDateString(d.createTime, "yyyy-MM-dd HH:mm:ss");
                            }
                        }
                        , { field: '', title: '操作', width: 150, align: 'center', toolbar: '#barTool' }
                    ]]
                    , done: function (res, curr, count) {//请求数据完成时，关闭加载loading
                        console.log(res);
                    }

                });


            }

            return {
                init() {//初始化
                    if (!inited) {
                        initData();
                        inited = true;
                    }
                },
                query() {//查询
                    loadData();
                },
                add() {//添加
                    layer.open({
                        type: 2,
                        title: '添加模块',
                        area: ['450px', '580px'],
                        content: ["/Module/AddOrUpdateModule"]
                    });
                }
            };
        }();
        var ModuleTree = function () {
            let inited = false;
            let data = {};
            var table;

            function initData() {
                layui.use(['tree', 'element'], function () {

                    //加载数据
                    loadData();

                    var treeData = [];
                    $.ajax({
                        url: "/Module/GetModuleTree",
                        type: "GET",
                        success: function (data) {
                            treeData = data;

                            //基本演示
                            layui.tree.render({
                                elem: '#divModuleTree'
                                , data: treeData
                                //, showCheckbox: true  //是否显示复选框
                                //, id: 'demoId1'
                                , isJump: true //是否允许点击节点时弹出新窗口跳转
                                , click: function (obj) {
                                    //debugger;
                                    var data = obj.data;  //获取当前点击的节点数据
                                    //layer.msg('节点数据：id:' + data.id + ' ,title:' + data.title);
                                    $(".layui-tree-txt").each(function (index, value) {
                                        $(value).removeClass("tree-node-select");
                                        if (value.innerHTML == data.title) {
                                            //alert(value.innerHTML);
                                            $(value).addClass("tree-node-select");
                                        }
                                    });
                                }
                                //, showLine: false
                                , onlyIconControl: true
                                //, edit: ['add', 'update', 'del'] //操作节点的图标
                            });
                        }
                    });
                });

            }

            function loadData() {
            }

            return {
                init() {//初始化
                    if (!inited) {
                        initData();
                        inited = true;
                    }
                }
            };
        }();
        ModuleList.init();
    </script>
}
